<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    疯狂的jQuery.md |  Small Bridge
  </title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/css/main.css">

  
  <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
  
  

  

<link rel="alternate" href="/atom.xml" title="Small Bridge" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-疯狂的jQuery-md" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  疯狂的jQuery.md
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/09/07/%E7%96%AF%E7%8B%82%E7%9A%84jQuery-md/" class="article-date">
  <time datetime="2020-09-07T13:12:02.000Z" itemprop="datePublished">2020-09-07</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

      
      
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">9.8k字</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">47分钟</span>
        </span>
    </span>
</div>

      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    
    <div class="article-entry" itemprop="articleBody">
      


      

      
      <p>@<a href="jQuery">TOC</a></p>
<h1 id="初识jQuery"><a href="#初识jQuery" class="headerlink" title="初识jQuery"></a>初识jQuery</h1><p>在开始jQuery之前，我们先来看一个例子:</p>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">	&lt;head&gt;</span><br><span class="line">		&lt;meta charset=<span class="string">"utf-8"</span>&gt;</span><br><span class="line">		&lt;title&gt;&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">	&lt;script src="js/</span>jquery<span class="number">-1.12</span><span class="number">.3</span>.js<span class="string">" type="</span>text/javascript<span class="string">" charset="</span>utf<span class="number">-8</span><span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">		&lt;!-- 使用jQuery实现 --&gt;</span></span><br><span class="line"><span class="string">		&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">			//绑定文档加载完成的监听</span></span><br><span class="line"><span class="string">			$(function ()&#123;</span></span><br><span class="line"><span class="string">				$('#btn2').click(function ()&#123;</span></span><br><span class="line"><span class="string">				 var username =	$('#username').val()</span></span><br><span class="line"><span class="string">				 alert(username)</span></span><br><span class="line"><span class="string">				&#125;)</span></span><br><span class="line"><span class="string">			&#125;)</span></span><br><span class="line"><span class="string">		&lt;/script&gt;</span></span><br><span class="line"><span class="string">	&lt;/head&gt;</span></span><br><span class="line"><span class="string">	&lt;body&gt;</span></span><br><span class="line"><span class="string">		用户名: &lt;input type="</span>text<span class="string">" name="</span><span class="string">" id="</span>username<span class="string">" value="</span><span class="string">" /&gt;</span></span><br><span class="line"><span class="string">		&lt;button type="</span>button<span class="string">" id="</span>btn1<span class="string">"&gt;确定(原生版)&lt;/button&gt;</span></span><br><span class="line"><span class="string">		&lt;button type="</span>button<span class="string">" id="</span>btn2<span class="string">"&gt;确定(jQuery版)&lt;/button&gt;</span></span><br><span class="line"><span class="string">	&lt;/body&gt;</span></span><br><span class="line"><span class="string">	&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">		//使用原生DOM</span></span><br><span class="line"><span class="string">		window.onload = function ()&#123;</span></span><br><span class="line"><span class="string">			var btn1 = document.getElementById('btn1')</span></span><br><span class="line"><span class="string">			btn1.onclick = function () &#123;</span></span><br><span class="line"><span class="string">				var username = document.getElementById('username').value</span></span><br><span class="line"><span class="string">				alert(username)</span></span><br><span class="line"><span class="string">			&#125;</span></span><br><span class="line"><span class="string">		&#125;</span></span><br><span class="line"><span class="string">	&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<p>这是分别使用原生JS和jQuery来实现的一个小功能，好像看起来jQuery还麻烦一点，但是代码量大了之后，jQuery还是要优于原生JS的<br>下面，我们从3个方面了解什么是jQuery</p>
<ol>
<li>what?<br>jQuery是什么呢？<br>它是一个优秀的JS函数库，封装简化DOM操作(CURD)/Ajax,它倡导的理念是”write less do more!”</li>
<li>why?<br>我们为什么要用jQuery呢？<br>这就要说到jQuery的特点：</li>
</ol>
<ul>
<li>强大的选择器:方便快速查找DOM元素</li>
<li>隐式遍历(迭代):一次操作多个元素</li>
<li>读写合一:读数据和写数据用的是一个函数</li>
<li>事件处理</li>
<li>链式调用</li>
<li>DOM操作(CURD)</li>
<li>样式操作</li>
<li>等</li>
</ul>
<ol start="3">
<li>how?<br>那我们该如何使用jQuery呢？</li>
</ol>
<p>引入jQuery库</p>
<ul>
<li>本地引入:使用script标签将本地的jQuery文件引入项目使用</li>
<li>CDN远程引入</li>
<li>npm下载:执行 npm install jQuery –save,下载jQuery并添加到项目依赖</li>
</ul>
<p>使用jQuery</p>
<ul>
<li>使用jQuery核心函数:$()/jQuery()</li>
<li>使用jQuery核心对象:$xxx(执行$()得到的返回对象)</li>
</ul>
<h1 id="jQuery的两把利器"><a href="#jQuery的两把利器" class="headerlink" title="jQuery的两把利器"></a>jQuery的两把利器</h1><p>jQuery中最重要的就是jQuery的两把利器，jQuery函数和jQuery对象，下面我分别介绍</p>
<ol>
<li>jQuery函数<br>jQuery库向外暴露的就是jQuery函数，可以通过$()/jQuery()的方式直接使用,但是也要分情况使用，它里面柔和了太多的功能，使用的方式不同，达到的效果就不同</li>
</ol>
<p>当成一般函数使用，根据传入的参数有以下用法：$(param)</p>
<ul>
<li>param是function：相当于window.onload=function(){},文档加载完成后的监听</li>
<li>param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象</li>
<li>param是DOM元素：将DOM元素包装成jQuery对象返回，通常使用$(this)</li>
<li>param是标签字符串：创建标签DOM元素对象，并包装成jQuery对象返回</li>
</ul>
<p>当成对象使用：可以调用里面的一些方法</p>
<ul>
<li>.each(obj/arr,function(key/index,value/item){})</li>
<li>.trim(str)<br>….</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">	&lt;head&gt;</span><br><span class="line">		&lt;meta charset=<span class="string">"utf-8"</span>&gt;</span><br><span class="line">		&lt;title&gt;&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">	&lt;/</span>head&gt;</span><br><span class="line">	&lt;body&gt;</span><br><span class="line">		&lt;div id=<span class="string">""</span>&gt;</span><br><span class="line">			&lt;button type=<span class="string">"button"</span> id=<span class="string">"btn"</span>&gt;测试&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">			&lt;br&gt;</span></span><br><span class="line"><span class="regexp">			</span></span><br><span class="line"><span class="regexp">			&lt;input type="text" name="msg1" /</span>&gt;</span><br><span class="line">			&lt;input type=<span class="string">"text"</span> name=<span class="string">"msg2"</span> /&gt;</span><br><span class="line">		&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">	&lt;/</span>body&gt;</span><br><span class="line">	&lt;script src=<span class="string">"js/jquery-1.12.3.js"</span> type=<span class="string">"text/javascript"</span> charset=<span class="string">"utf-8"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">	&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">		/*</span></span><br><span class="line"><span class="string">		需求1：点击按钮：显式按钮的文本，显式一个新的输入框</span></span><br><span class="line"><span class="string">		需求2：遍历输出数组中所有元素</span></span><br><span class="line"><span class="string">		需求3：去掉"</span>my cxq <span class="string">"两端的空格</span></span><br><span class="line"><span class="string">		*/</span></span><br><span class="line"><span class="string">	   //1.参数为函数：当DOM加载完成后，执行此回调函数</span></span><br><span class="line"><span class="string">	   $(function ()&#123; //绑定文档加载完成的监听</span></span><br><span class="line"><span class="string">		   //2.参数为选择器字符串：查找所有匹配的标签，并将他们封装成jQuery对象</span></span><br><span class="line"><span class="string">		   $('#btn').click(function ()&#123;</span></span><br><span class="line"><span class="string">			   //this是发生事件的dom元素-----&gt;button</span></span><br><span class="line"><span class="string">			   //alert(this.innerHTML)</span></span><br><span class="line"><span class="string">			   //3.参数为DOM元素：将dom对象包装成jQuery对象</span></span><br><span class="line"><span class="string">			   alert($(this).html())</span></span><br><span class="line"><span class="string">			   </span></span><br><span class="line"><span class="string">			   //4.参数为html标签字符串(用得少):创建标签对象并封装成jQuery对象</span></span><br><span class="line"><span class="string">			   $('&lt;input type="</span>text<span class="string">" name="</span>msg3<span class="string">" id="</span><span class="string">" value="</span><span class="string">" /&gt;').appendTo('div')</span></span><br><span class="line"><span class="string">		   &#125;)</span></span><br><span class="line"><span class="string">	   &#125;)</span></span><br><span class="line"><span class="string">	   </span></span><br><span class="line"><span class="string">		var arr = [2,4,7]</span></span><br><span class="line"><span class="string">		$.each(arr,function (index,item)&#123;</span></span><br><span class="line"><span class="string">			console.log(index,item)</span></span><br><span class="line"><span class="string">		&#125;)</span></span><br><span class="line"><span class="string">		var str = '  my cxq  '</span></span><br><span class="line"><span class="string">		console.log($.trim(str))</span></span><br><span class="line"><span class="string">	&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<ol start="2">
<li>jQuery对象<br>包含所有匹配的n个DOM元素的伪数组对象<br>执行$()返回的就是jQuery对象</li>
</ol>
<p>基本行为:</p>
<ul>
<li>length/size():得到DOM元素的个数</li>
<li>[index]/get(index):得到指定下边对应的DOM元素</li>
<li>each(function(index,domEle){}):遍历所有DOM元素</li>
<li>index():得到当前DOM元素在所有兄弟中的下标并返回<br>…</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">	&lt;head&gt;</span><br><span class="line">		&lt;meta charset=<span class="string">"utf-8"</span>&gt;</span><br><span class="line">		&lt;title&gt;&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">	&lt;/</span>head&gt;</span><br><span class="line">	&lt;body&gt;</span><br><span class="line">		&lt;button type=<span class="string">"button"</span>&gt;测试<span class="number">1</span>&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">		&lt;button type="button"&gt;测试2&lt;/</span>button&gt;</span><br><span class="line">		&lt;button type=<span class="string">"button"</span> id=<span class="string">"btn3"</span>&gt;测试<span class="number">3</span>&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">		&lt;button type="button"&gt;测试4&lt;/</span>button&gt;</span><br><span class="line">		&lt;!-- </span><br><span class="line">		 <span class="number">1.</span>jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象</span><br><span class="line">		 <span class="number">2.</span>基本行为</span><br><span class="line">			*size()/length</span><br><span class="line">			*[index]/<span class="keyword">get</span>(index):得到对应位置的DOM元素</span><br><span class="line">			*each():遍历包含的所有DOM元素</span><br><span class="line">			*index():得到在所在兄弟元素中的下标</span><br><span class="line">		 --&gt;</span><br><span class="line">	&lt;/body&gt;</span><br><span class="line">	&lt;script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;</span><br><span class="line">	&lt;script type="text/javascript"&gt;</span><br><span class="line">		//需求1：统计一共有多少个按钮</span><br><span class="line">		var $buttons = $('button')</span><br><span class="line">		console.log($buttons.size(),$buttons.length)</span><br><span class="line">		</span><br><span class="line">		//需求2：取出第二个button</span><br><span class="line">		console.log($buttons[1].innerHTML)</span><br><span class="line">		console.log($buttons.<span class="keyword">get</span>(1).innerHTML)</span><br><span class="line">		</span><br><span class="line">		//需求3：输出所有button标签的文本</span><br><span class="line">		$buttons.each(function (index,domEle)&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(index,domEle.innerHTML,<span class="keyword">this</span>)</span><br><span class="line">		&#125;)</span><br><span class="line">		<span class="comment">//需求4：输出测试3按钮是所有按钮的第几个？</span></span><br><span class="line">		<span class="built_in">console</span>.log($(<span class="string">'#btn3'</span>).index())</span><br><span class="line">	&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>
<h1 id="jQuery-选择器"><a href="#jQuery-选择器" class="headerlink" title="jQuery 选择器"></a>jQuery 选择器</h1><p>选择器本身只是一个有特定语法规则的字符串，没有实质作用，它的基本语法规则使用的就是CSS的选择器语法，只有调用$(),并将选择器作为参数传入才能起作用，它有以下分类：</p>
<ol>
<li>基本选择器</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">05</span>_基本选择器&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div id=<span class="string">"div1"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;div1(<span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>)&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;div id="div2" class="box"&gt;div2(class="box")&lt;/</span>div&gt;</span><br><span class="line">&lt;div id=<span class="string">"div3"</span>&gt;div3&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;span class="box"&gt;span(class="box")&lt;/</span>span&gt;</span><br><span class="line"></span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;AAAAA&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;BBBBB(title="hello")&lt;/</span>li&gt;</span><br><span class="line">  &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;CCCCC(<span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>)&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;DDDDDD(title="hello")&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">1. 是什么?</span></span><br><span class="line"><span class="regexp">  - 有特定格式的字符串</span></span><br><span class="line"><span class="regexp">2. 作用</span></span><br><span class="line"><span class="regexp">  - 用来查找特定页面元素</span></span><br><span class="line"><span class="regexp">3. 基本选择器</span></span><br><span class="line"><span class="regexp">  - #id : id选择器</span></span><br><span class="line"><span class="regexp">  - element : 元素选择器</span></span><br><span class="line"><span class="regexp">  - .class : 属性选择器</span></span><br><span class="line"><span class="regexp">  - * : 任意标签</span></span><br><span class="line"><span class="regexp">  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)</span></span><br><span class="line"><span class="regexp">  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)</span></span><br><span class="line"><span class="regexp">--&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="js/</span>jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">" type="</span>text/javascript<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. 选择id为div1的元素</span></span><br><span class="line"><span class="string">   2. 选择所有的div元素</span></span><br><span class="line"><span class="string">   3. 选择所有class属性为box的元素</span></span><br><span class="line"><span class="string">   4. 选择所有的div和span元素</span></span><br><span class="line"><span class="string">   5. 选择所有class属性为box的div元素</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  //1. 选择id为div1的元素</span></span><br><span class="line"><span class="string">  // $('#div1').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 选择所有的div元素</span></span><br><span class="line"><span class="string">  // $('div').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 选择所有class属性为box的元素</span></span><br><span class="line"><span class="string">  //$('.box').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. 选择所有的div和span元素</span></span><br><span class="line"><span class="string">  // $('div,span').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //5. 选择所有class属性为box的div元素</span></span><br><span class="line"><span class="string">  //$('div.box').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //$('*').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>层次选择器</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">06</span>_层次选择器&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;AAAAA&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li class="box"&gt;CCCCC&lt;/</span>li&gt;</span><br><span class="line">  &lt;li title=<span class="string">"hello"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>BBBBB<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;&lt;span class="box"&gt;DDDD&lt;/</span>span&gt;&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;span&gt;EEEEE&lt;/</span>span&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器</span></span><br><span class="line"><span class="regexp">1. ancestor descendant</span></span><br><span class="line"><span class="regexp">  在给定的祖先元素下匹配所有的后代元素</span></span><br><span class="line"><span class="regexp">2. parent&gt;child</span></span><br><span class="line"><span class="regexp">  在给定的父元素下匹配所有的子元素</span></span><br><span class="line"><span class="regexp">3. prev+next</span></span><br><span class="line"><span class="regexp">  匹配所有紧接在 prev 元素后的 next 元素</span></span><br><span class="line"><span class="regexp">4. prev~siblings</span></span><br><span class="line"><span class="regexp">  匹配 prev 元素之后的所有 siblings 元素</span></span><br><span class="line"><span class="regexp">--&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;script src="js/</span>jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">" type="</span>text/javascript<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. 选中ul下所有的的span</span></span><br><span class="line"><span class="string">   2. 选中ul下所有的子元素span</span></span><br><span class="line"><span class="string">   3. 选中class为box的下一个li</span></span><br><span class="line"><span class="string">   4. 选中ul下的class为box的元素后面的所有兄弟元素</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //1. 选中ul下所有的的span</span></span><br><span class="line"><span class="string">  // $('ul span').css('background', 'yellow')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 选中ul下所有的子元素span</span></span><br><span class="line"><span class="string">  // $('ul&gt;span').css('background', 'yellow')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 选中class为box的下一个li</span></span><br><span class="line"><span class="string">  // $('.box+li').css('background', 'yellow')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. 选中ul下的class为box的元素后面的所有兄弟元素</span></span><br><span class="line"><span class="string">  $('ul .box~*').css('background', 'yellow')</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>过滤选择器</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">07</span>_过滤选择器&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;div id=<span class="string">"div1"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div1</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div2"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div2</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div3"</span>&gt;div3&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;span class="box"&gt;class为box的span&lt;/</span>span&gt;</span><br><span class="line">&lt;br/&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;AAAAA&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;BBBBB&lt;/</span>li&gt;</span><br><span class="line">  &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;CCCCC&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;DDDDDD&lt;/</span>li&gt;</span><br><span class="line">  &lt;li title=<span class="string">"two"</span>&gt;BBBBB&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li style="display:none"&gt;我本来是隐藏的&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">在原有选择器匹配的元素中进一步进行过滤的选择器</span></span><br><span class="line"><span class="regexp">  * 基本</span></span><br><span class="line"><span class="regexp">  * 内容</span></span><br><span class="line"><span class="regexp">  * 可见性</span></span><br><span class="line"><span class="regexp">  * 属性</span></span><br><span class="line"><span class="regexp">--&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="js/</span>jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">" type="</span>text/javascript<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. 选择第一个div</span></span><br><span class="line"><span class="string">   2. 选择最后一个class为box的元素</span></span><br><span class="line"><span class="string">   3. 选择所有class属性不为box的div</span></span><br><span class="line"><span class="string">   4. 选择第二个和第三个li元素</span></span><br><span class="line"><span class="string">   5. 选择内容为BBBBB的li</span></span><br><span class="line"><span class="string">   6. 选择隐藏的li</span></span><br><span class="line"><span class="string">   7. 选择有title属性的li元素</span></span><br><span class="line"><span class="string">   8. 选择所有属性title为hello的li元素</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  //1. 选择第一个div</span></span><br><span class="line"><span class="string">  // $('div:first').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 选择最后一个class为box的元素</span></span><br><span class="line"><span class="string">  //$('.box:last').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 选择所有class属性不为box的div</span></span><br><span class="line"><span class="string">  // $('div:not(.box)').css('background', 'red')  //没有class属性也可以</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. 选择第二个和第三个li元素</span></span><br><span class="line"><span class="string">  // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次</span></span><br><span class="line"><span class="string">  //$('li:lt(3):gt(0)').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //5. 选择内容为BBBBB的li</span></span><br><span class="line"><span class="string">  // $('li:contains("</span>BBBBB<span class="string">")').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //6. 选择隐藏的li</span></span><br><span class="line"><span class="string">  // console.log($('li:hidden').length, $('li:hidden')[0])</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //7. 选择有title属性的li元素</span></span><br><span class="line"><span class="string">  // $('li[title]').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //8. 选择所有属性title为hello的li元素</span></span><br><span class="line"><span class="string">  $('li[title="</span>hello<span class="string">"]').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>表单选择器</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">08</span>_表单选择器&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;form&gt;</span><br><span class="line">  用户名: <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>/&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line">  密 码: &lt;input type="password"/&gt;&lt;br&gt;</span><br><span class="line">  爱 好:</span><br><span class="line">  &lt;input type="checkbox" checked="checked"/&gt;篮球</span><br><span class="line">  &lt;input type="checkbox"/&gt;足球</span><br><span class="line">  &lt;input type="checkbox" checked="checked"/&gt;羽毛球 &lt;br&gt;</span><br><span class="line">  性 别:</span><br><span class="line">  &lt;input type="radio" name="sex" value='male'/&gt;男</span><br><span class="line">  &lt;input type="radio" name="sex" value='female'/&gt;女&lt;br&gt;</span><br><span class="line">  邮 箱: &lt;input type="text" name="email" disabled="disabled"/&gt;&lt;br&gt;</span><br><span class="line">  所在地:</span><br><span class="line">  &lt;select&gt;</span><br><span class="line">    &lt;option value="1"&gt;北京&lt;/option&gt;</span><br><span class="line">    &lt;option value="2" selected="selected"&gt;天津&lt;/option&gt;</span><br><span class="line">    &lt;option value="3"&gt;河北&lt;/option&gt;</span><br><span class="line">  &lt;/select&gt;&lt;br&gt;</span><br><span class="line">  &lt;input type="submit" value="提交"/&gt;</span><br><span class="line">&lt;/form&gt;</span><br><span class="line">&lt;!--</span><br><span class="line">表单选择器</span><br><span class="line">  1). 表单</span><br><span class="line">  2). 表单对象属性</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src="js/jquery-1.10.1.js" type="text/javascript"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script type="text/javascript"&gt;</span><br><span class="line">  /*</span><br><span class="line">   需求:</span><br><span class="line">   1. 选择不可用的文本输入框</span><br><span class="line">   2. 显示选择爱好 的个数</span><br><span class="line">   3. 显示选择的城市名称</span><br><span class="line">   */</span><br><span class="line">  //1. 选择不可用的文本输入框</span><br><span class="line">  // $(':text:disabled').css('background', 'red')</span><br><span class="line"></span><br><span class="line">  //2. 显示选择爱好 的个数</span><br><span class="line">  console.log($(':checkbox:checked').length)</span><br><span class="line"></span><br><span class="line">  //3. 显示选择的城市名称</span><br><span class="line">  $(':submit').click(function () &#123;</span><br><span class="line">    var city = $('select&gt;option:selected').html() // 选择的option的标签体文本</span><br><span class="line">    city = $('select').val()  // 选择的option的value属性值</span><br><span class="line">    alert(city)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h1 id="工具的方法"><a href="#工具的方法" class="headerlink" title="$工具的方法"></a>$工具的方法</h1><p>这些方法很少用了，因为后面出现了更好的并且已经集成到JS中了，看一下吧</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">09</span>_$工具方法&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;!--</span><br><span class="line"><span class="number">1.</span> $.each(): 遍历数组或对象中的数据</span><br><span class="line"><span class="number">2.</span> $.trim(): 去除字符串两边的空格</span><br><span class="line"><span class="number">3.</span> $.type(obj): 得到数据的类型</span><br><span class="line"><span class="number">4.</span> $.isArray(obj): 判断是否是数组</span><br><span class="line"><span class="number">5.</span> $.isFunction(obj): 判断是否是函数</span><br><span class="line"><span class="number">6.</span> $.parseJSON(json) : 解析json字符串转换为js对象/数组</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  //1. $.each(): 遍历数组或对象中的数据</span></span><br><span class="line"><span class="string">  var obj = &#123;</span></span><br><span class="line"><span class="string">    name: 'Tom',</span></span><br><span class="line"><span class="string">    setName: function (name) &#123;</span></span><br><span class="line"><span class="string">      this.name = name</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">  $.each(obj, function (key, value) &#123;</span></span><br><span class="line"><span class="string">    console.log(key, value)</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">  //2. $.trim(): 去除字符串两边的空格</span></span><br><span class="line"><span class="string">  //3. $.type(obj): 得到数据的类型</span></span><br><span class="line"><span class="string">  console.log($.type($)) // 'function'</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. $.isArray(obj): 判断是否是数组</span></span><br><span class="line"><span class="string">  console.log($.isArray($('body')), $.isArray([])) // false true</span></span><br><span class="line"><span class="string">  //5. $.isFunction(obj): 判断是否是函数</span></span><br><span class="line"><span class="string">  console.log($.isFunction($)) // true</span></span><br><span class="line"><span class="string">  //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组</span></span><br><span class="line"><span class="string">  var json = '&#123;"</span>name<span class="string">":"</span>Tom<span class="string">", "</span>age<span class="string">":12&#125;'  // json对象: &#123;&#125;</span></span><br><span class="line"><span class="string">  // json对象===&gt;JS对象</span></span><br><span class="line"><span class="string">  console.log($.parseJSON(json))</span></span><br><span class="line"><span class="string">  json = '[&#123;"</span>name<span class="string">":"</span>Tom<span class="string">", "</span>age<span class="string">":12&#125;, &#123;"</span>name<span class="string">":"</span>JACK<span class="string">", "</span>age<span class="string">":13&#125;]' // json数组: []</span></span><br><span class="line"><span class="string">  // json数组===&gt;JS数组</span></span><br><span class="line"><span class="string">  console.log($.parseJSON(json))</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">  JSON.parse(jsonString)   json字符串---&gt;js对象/数组</span></span><br><span class="line"><span class="string">  JSON.stringify(jsObj/jsArr)  js对象/数组---&gt;json字符串</span></span><br><span class="line"><span class="string">  */</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="jQuery属性"><a href="#jQuery属性" class="headerlink" title="jQuery属性"></a>jQuery属性</h1><ol>
<li>操作任意属性<br>attr()：操作所有非布尔值的属性<br>removeAttr()：移除属性<br>prop()：操作布尔值类型的数据</li>
<li>操作class属性<br>addClass()：添加一个class属性值，不会覆盖原来的<br>removeClass()：移除指定的class值</li>
<li>操作HTML代码/文本/值<br>html()：文本值<br>val()：value属性值</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">10</span>_属性&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;div id=<span class="string">"div1"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span> title=<span class="string">"one"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div1</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div2"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span> title=<span class="string">"two"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div2</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div3"</span>&gt;div3&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;span class="box"&gt;class为box的span&lt;/</span>span&gt;</span><br><span class="line">&lt;br/&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;AAAAA&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello" class="box2"&gt;BBBBB&lt;/</span>li&gt;</span><br><span class="line">  &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;CCCCC&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;DDDDDD&lt;/</span>li&gt;</span><br><span class="line">  &lt;li title=<span class="string">"two"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>BBBBB<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line"></span><br><span class="line">&lt;input type=<span class="string">"text"</span> name=<span class="string">"username"</span> value=<span class="string">"guiguClass"</span>/&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;input type=<span class="string">"checkbox"</span>&gt;</span><br><span class="line">&lt;input type=<span class="string">"checkbox"</span>&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;button&gt;选中&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;button&gt;不选中&lt;/</span>button&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line"><span class="number">1.</span> 操作任意属性</span><br><span class="line">   attr()</span><br><span class="line">   removeAttr()</span><br><span class="line">   prop()</span><br><span class="line"><span class="number">2.</span> 操作<span class="class"><span class="keyword">class</span>属性</span></span><br><span class="line"><span class="class">   <span class="title">addClass</span>()</span></span><br><span class="line"><span class="class">   <span class="title">removeClass</span>()</span></span><br><span class="line"><span class="class">3. 操作<span class="title">HTML</span>代码/文本/值</span></span><br><span class="line"><span class="class">   <span class="title">html</span>()</span></span><br><span class="line"><span class="class">   <span class="title">val</span>()</span></span><br><span class="line"><span class="class">--&gt;</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">&lt;<span class="title">script</span> <span class="title">src</span></span>=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. 读取第一个div的title属性</span></span><br><span class="line"><span class="string">   2. 给所有的div设置name属性(value为atguigu)</span></span><br><span class="line"><span class="string">   3. 移除所有div的title属性</span></span><br><span class="line"><span class="string">   4. 给所有的div设置class='guiguClass'</span></span><br><span class="line"><span class="string">   5. 给所有的div添加class='abc'</span></span><br><span class="line"><span class="string">   6. 移除所有div的guiguClass的class</span></span><br><span class="line"><span class="string">   7. 得到最后一个li的标签体文本</span></span><br><span class="line"><span class="string">   8. 设置第一个li的标签体为"</span>&lt;h1&gt;mmmmmmmmm&lt;<span class="regexp">/h1&gt;"</span></span><br><span class="line"><span class="regexp">   9. 得到输入框中的value值</span></span><br><span class="line"><span class="regexp">   10. 将输入框的值设置为atguigu</span></span><br><span class="line"><span class="regexp">   11. 点击'全选'按钮实现全选</span></span><br><span class="line"><span class="regexp">   12. 点击'全不选'按钮实现全不选</span></span><br><span class="line"><span class="regexp">   */</span></span><br><span class="line">  <span class="comment">//1. 读取第一个div的title属性</span></span><br><span class="line">  <span class="comment">// console.log($('div:first').attr('title')) // one</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//2. 给所有的div设置name属性(value为cxq)</span></span><br><span class="line">  <span class="comment">// $('div').attr('name', 'cxq')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//3. 移除所有div的title属性</span></span><br><span class="line">  <span class="comment">// $('div').removeAttr('title')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//4. 给所有的div设置class='cxqClass'</span></span><br><span class="line">  <span class="comment">//$('div').attr('class', 'cxqClass')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//5. 给所有的div添加class='abc'</span></span><br><span class="line">  <span class="comment">//$('div').addClass('abc')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//6. 移除所有div的cxqClass的class</span></span><br><span class="line">  <span class="comment">//$('div').removeClass('cxqClass')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//7. 得到最后一个li的标签体文本</span></span><br><span class="line">  <span class="comment">//console.log($('li:last').html())</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//8. 设置第一个li的标签体为"&lt;h1&gt;mmmmmmmmm&lt;/h1&gt;"</span></span><br><span class="line">  <span class="comment">//$('li:first').html('&lt;h1&gt;mmmmmmmmm&lt;/h1&gt;')</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//9. 得到输入框中的value值</span></span><br><span class="line">  <span class="comment">//console.log($(':text').val()) // 读取</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//10. 将输入框的值设置为cxq</span></span><br><span class="line">  <span class="comment">//$(':text').val('cxq') // 设置      读写合一</span></span><br><span class="line">  <span class="comment">//11. 点击'全选'按钮实现全选</span></span><br><span class="line">    <span class="comment">// attr(): 操作属性值为非布尔值的属性</span></span><br><span class="line">    <span class="comment">// prop(): 专门操作属性值为布尔值的属性</span></span><br><span class="line">  <span class="keyword">var</span> $checkboxs = $(<span class="string">':checkbox'</span>)</span><br><span class="line">  $(<span class="string">'button:first'</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $checkboxs.prop(<span class="string">'checked'</span>, <span class="literal">true</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">//12. 点击'全不选'按钮实现全不选</span></span><br><span class="line">  $(<span class="string">'button:last'</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $checkboxs.prop(<span class="string">'checked'</span>, <span class="literal">false</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="CSS模块"><a href="#CSS模块" class="headerlink" title="CSS模块"></a>CSS模块</h1><p>接下来我们谈一谈关于css()函数设置样式、位置和尺寸的API<br>css()</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">11</span>_css&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;p style=<span class="string">"color: blue;"</span>&gt;月亮的后裔&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;p style="color: green;"&gt;太阳的后裔&lt;/</span>p&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">设置css样式/读取css值</span><br><span class="line">  css()</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   1. 得到第一个p标签的颜色</span></span><br><span class="line"><span class="string">   2. 设置所有p标签的文本颜色为red</span></span><br><span class="line"><span class="string">   3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  //1. 得到第一个p标签的颜色</span></span><br><span class="line"><span class="string">  //console.log($('p:first').css('color'))</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 设置所有p标签的文本颜色为red</span></span><br><span class="line"><span class="string">  //$('p').css('color', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)</span></span><br><span class="line"><span class="string">  $('p:eq(1)').css(&#123;</span></span><br><span class="line"><span class="string">    color: '#ff0011',</span></span><br><span class="line"><span class="string">    background: 'blue',</span></span><br><span class="line"><span class="string">    width: 300,</span></span><br><span class="line"><span class="string">    height: 30</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<p>offset和position</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">12</span>_offset和position&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;style type=<span class="string">"text/css"</span>&gt;</span><br><span class="line">  * &#123;</span><br><span class="line">    margin: <span class="number">0</span>px;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div1 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">200</span>px;</span><br><span class="line">    height: <span class="number">200</span>px;</span><br><span class="line">    top: <span class="number">20</span>px;</span><br><span class="line">    left: <span class="number">10</span>px;</span><br><span class="line">    background: blue;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div2 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">100</span>px;</span><br><span class="line">    height: <span class="number">100</span>px;</span><br><span class="line">    top: <span class="number">50</span>px;</span><br><span class="line">    background: red;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div3 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: <span class="number">250</span>px;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp">&lt;body style="height: 2000px;"&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;div class="div1"&gt;</span></span><br><span class="line"><span class="regexp">  &lt;div class="div2"&gt;测试offset&lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;div class='div3'&gt;</span></span><br><span class="line"><span class="regexp">  &lt;button id="btn1"&gt;读取offset和position&lt;/</span>button&gt;</span><br><span class="line">  &lt;button id=<span class="string">"btn2"</span>&gt;设置offset&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">获取/设置标签的位置数据</span><br><span class="line">  * offset(): 相对页面左上角的坐标</span><br><span class="line">  * position(): 相对于父元素左上角的坐标</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">  需求:</span></span><br><span class="line"><span class="string">  1. 点击 btn1</span></span><br><span class="line"><span class="string">    打印 div1 相对于页面左上角的位置</span></span><br><span class="line"><span class="string">    打印 div2 相对于页面左上角的位置</span></span><br><span class="line"><span class="string">    打印 div1 相对于父元素左上角的位置</span></span><br><span class="line"><span class="string">    打印 div2 相对于父元素左上角的位置</span></span><br><span class="line"><span class="string">  2. 点击 btn2</span></span><br><span class="line"><span class="string">    设置 div2 相对于页面的左上角的位置</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  $('#btn1').click(function () &#123;</span></span><br><span class="line"><span class="string">//    打印 div1 相对于页面左上角的位置</span></span><br><span class="line"><span class="string">    var offset = $('.div1').offset()</span></span><br><span class="line"><span class="string">    console.log(offset.left, offset.top) // 10 20</span></span><br><span class="line"><span class="string">//    打印 div2 相对于页面左上角的位置</span></span><br><span class="line"><span class="string">    offset = $('.div2').offset()</span></span><br><span class="line"><span class="string">    console.log(offset.left, offset.top) // 10 70</span></span><br><span class="line"><span class="string">//    打印 div1 相对于父元素左上角的位置</span></span><br><span class="line"><span class="string">    var position = $('.div1').position()</span></span><br><span class="line"><span class="string">    console.log(position.left, position.top) // 10 20</span></span><br><span class="line"><span class="string">//    打印 div2 相对于父元素左上角的位置</span></span><br><span class="line"><span class="string">    position = $('.div2').position()</span></span><br><span class="line"><span class="string">    console.log(position.left, position.top) // 0 50</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  $('#btn2').click(function () &#123;</span></span><br><span class="line"><span class="string">    $('.div2').offset(&#123;</span></span><br><span class="line"><span class="string">      left: 50,</span></span><br><span class="line"><span class="string">      top: 100</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<p>元素滚动</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">13</span>_元素滚动&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body style=<span class="string">"height: 2000px;"</span>&gt;</span><br><span class="line">&lt;div style=<span class="string">"border:1px solid black;width:100px;height:150px;overflow:auto"</span>&gt;</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  This is some text. This is some text. This is some text. This is some text.</span><br><span class="line">  his is some text.</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;br&gt;</span></span><br><span class="line"><span class="regexp">&lt;br&gt;</span></span><br><span class="line"><span class="regexp">&lt;br&gt;</span></span><br><span class="line"><span class="regexp">&lt;button id="btn1"&gt;得到scrollTop&lt;/</span>button&gt;</span><br><span class="line">&lt;button id=<span class="string">"btn2"</span>&gt;设置scrollTop&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">1. scrollTop():</span></span><br><span class="line"><span class="regexp">  读取/</span>设置滚动条的Y坐标</span><br><span class="line"><span class="number">2.</span> $(<span class="built_in">document</span>.body).scrollTop()+$(<span class="built_in">document</span>.documentElement).scrollTop()</span><br><span class="line">  读取页面滚动条的Y坐标(兼容chrome和IE)</span><br><span class="line"><span class="number">3.</span> $(<span class="string">'body,html'</span>).scrollTop(<span class="number">60</span>);</span><br><span class="line">  滚动到指定位置(兼容chrome和IE)</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  /</span>*</span><br><span class="line">   需求:</span><br><span class="line">   <span class="number">1.</span> 得到div或页面滚动条的坐标</span><br><span class="line">   <span class="number">2.</span> 让div或页面的滚动条滚动到指定位置</span><br><span class="line">   *<span class="regexp">/</span></span><br><span class="line"><span class="regexp">  /</span><span class="regexp">/1. 得到div或页面滚动条的坐标</span></span><br><span class="line"><span class="regexp">  $('#btn1').click(function () &#123;</span></span><br><span class="line"><span class="regexp">    console.log($('div').scrollTop())</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ console.log($('html').scrollTop()+$('body').scrollTop())</span></span><br><span class="line"><span class="regexp">    console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) /</span><span class="regexp">/ 兼容IE/</span>Chrome</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">//2. 让div或页面的滚动条滚动到指定位置</span></span><br><span class="line">  $(<span class="string">'#btn2'</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $(<span class="string">'div'</span>).scrollTop(<span class="number">200</span>)</span><br><span class="line">    $(<span class="string">'html,body'</span>).scrollTop(<span class="number">300</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure>
<p>元素的尺寸</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">14</span>_元素的尺寸&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">  div &#123;</span><br><span class="line">    width: <span class="number">100</span>px;</span><br><span class="line">    height: <span class="number">150</span>px;</span><br><span class="line">    background: red;</span><br><span class="line">    padding: <span class="number">10</span>px;</span><br><span class="line">    border: 10px #fbd850 solid;</span><br><span class="line">    margin: <span class="number">10</span>px;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div&gt;div&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">1. 内容尺寸</span></span><br><span class="line"><span class="regexp">  height(): height</span></span><br><span class="line"><span class="regexp">  width(): width</span></span><br><span class="line"><span class="regexp">2. 内部尺寸</span></span><br><span class="line"><span class="regexp">  innerHeight(): height+padding</span></span><br><span class="line"><span class="regexp">  innerWidth(): width+padding</span></span><br><span class="line"><span class="regexp">3. 外部尺寸</span></span><br><span class="line"><span class="regexp">  outerHeight(false/</span><span class="literal">true</span>): height+padding+border  如果是<span class="literal">true</span>, 加上margin</span><br><span class="line">  outerWidth(<span class="literal">false</span>/<span class="literal">true</span>): width+padding+border 如果是<span class="literal">true</span>, 加上margin</span><br><span class="line">--&gt;</span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  var $div = $('div')</span></span><br><span class="line"><span class="regexp">  /</span><span class="regexp">/ 1. 内容尺寸</span></span><br><span class="line"><span class="regexp">  console.log($div.width(), $div.height())  /</span><span class="regexp">/ 100 150</span></span><br><span class="line"><span class="regexp">  /</span><span class="regexp">/ 2. 内部尺寸</span></span><br><span class="line"><span class="regexp">  console.log($div.innerWidth(), $div.innerHeight()) /</span><span class="regexp">/120 170</span></span><br><span class="line"><span class="regexp">  /</span><span class="regexp">/ 3. 外部尺寸</span></span><br><span class="line"><span class="regexp">  console.log($div.outerWidth(), $div.outerHeight()) /</span><span class="regexp">/140 190</span></span><br><span class="line"><span class="regexp">  console.log($div.outerWidth(true), $div.outerHeight(true)) /</span><span class="regexp">/160 210</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br><span class="line">&lt;<span class="regexp">/body&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>
<h1 id="jQuery对象的筛选"><a href="#jQuery对象的筛选" class="headerlink" title="jQuery对象的筛选"></a>jQuery对象的筛选</h1><p>在jQuery对象中的元素对象数组中过滤出一部分元素来叫做jQuery对象的筛选，常用的API有：</p>
<ul>
<li>.first()</li>
<li>. last()</li>
<li>. eq(index|-index)</li>
<li>. filter(selector)</li>
<li>. not(selector)</li>
<li>. has(selector)</li>
<li>.children(): 子标签中找</li>
<li>. find() : 后代标签中找</li>
<li>. parent() : 父标签</li>
<li>. prevAll() : 前面所有的兄弟标签</li>
<li>. nextAll() : 后面所有的兄弟标签</li>
<li>. siblings() : 前后所有的兄弟标签</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">15</span>_筛选_过滤&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;AAAAA&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello" class="box2"&gt;BBBBB&lt;/</span>li&gt;</span><br><span class="line">  &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;CCCCC&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;DDDDDD&lt;/</span>li&gt;</span><br><span class="line">  &lt;li title=<span class="string">"two"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>BBBBB<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line">&lt;li&gt;eeeee&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;li&gt;EEEEE&lt;/</span>li&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">在jQuery对象中的元素对象数组中过滤出一部分元素来</span><br><span class="line"><span class="number">1.</span> first()</span><br><span class="line"><span class="number">2.</span> last()</span><br><span class="line"><span class="number">3.</span> eq(index|-index)</span><br><span class="line"><span class="number">4.</span> filter(selector)</span><br><span class="line"><span class="number">5.</span> not(selector)</span><br><span class="line"><span class="number">6.</span> has(selector)</span><br><span class="line">--&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. ul下li标签第一个</span></span><br><span class="line"><span class="string">   2. ul下li标签的最后一个</span></span><br><span class="line"><span class="string">   3. ul下li标签的第二个</span></span><br><span class="line"><span class="string">   4. ul下li标签中title属性为hello的</span></span><br><span class="line"><span class="string">   5. ul下li标签中title属性不为hello的</span></span><br><span class="line"><span class="string">   6. ul下li标签中有span子标签的</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  var $lis = $('ul&gt;li')</span></span><br><span class="line"><span class="string">  //1. ul下li标签第一个</span></span><br><span class="line"><span class="string">  // $lis.first().css('background', 'red')</span></span><br><span class="line"><span class="string">  // $lis[0].style.background = 'red'</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. ul下li标签的最后一个</span></span><br><span class="line"><span class="string">  // $lis.last().css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. ul下li标签的第二个</span></span><br><span class="line"><span class="string">  // $lis.eq(1).css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. ul下li标签中title属性为hello的</span></span><br><span class="line"><span class="string">  // $lis.filter('[title=hello]').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //5. ul下li标签中title属性不为hello的</span></span><br><span class="line"><span class="string">  // $lis.not('[title=hello]').css('background', 'red')</span></span><br><span class="line"><span class="string">  // $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //6. ul下li标签中有span子标签的</span></span><br><span class="line"><span class="string">  $lis.has('span').css('background', 'red')</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">16</span>_筛选_查找孩子-父母-兄弟标签&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div id=<span class="string">"div1"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span> title=<span class="string">"one"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div1</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div2"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;<span class="class"><span class="keyword">class</span>为<span class="title">box</span>的<span class="title">div2</span>&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"><span class="class">&lt;<span class="title">div</span> <span class="title">id</span></span>=<span class="string">"div3"</span>&gt;div3&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;span class="box"&gt;class为box的span&lt;/</span>span&gt;</span><br><span class="line">&lt;br/&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;span&gt;span文本<span class="number">1</span>&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;AAAAA&lt;/</span>li&gt;</span><br><span class="line">    &lt;li title=<span class="string">"hello"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"box2"</span>&gt;BBBBB&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li class="box" id='cc'&gt;CCCCC&lt;/</span>li&gt;</span><br><span class="line">    &lt;li title=<span class="string">"hello"</span>&gt;DDDDDD&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li title="two"&gt;&lt;span&gt;span文本2&lt;/</span>span&gt;&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;span&gt;span文本3&lt;/</span>span&gt;</span><br><span class="line">  &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">  &lt;span&gt;span文本444&lt;/</span>span&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>eeeee<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>EEEEE<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">  &lt;br&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="comment">&lt;!--</span></span></span><br><span class="line"><span class="xml">在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签</span></span><br><span class="line"><span class="xml">1. children(): 子标签中找</span></span><br><span class="line"><span class="xml">2. find() : 后代标签中找</span></span><br><span class="line"><span class="xml">3. parent() : 父标签</span></span><br><span class="line"><span class="xml">4. prevAll() : 前面所有的兄弟标签</span></span><br><span class="line"><span class="xml">5. nextAll() : 后面所有的兄弟标签</span></span><br><span class="line"><span class="xml">6. siblings() : 前后所有的兄弟标签</span></span><br><span class="line"><span class="xml">--&gt;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery-1.10.1.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;script type="text/javascript"&gt;</span><br><span class="line">  /*</span><br><span class="line">   需求:</span><br><span class="line">   1. ul标签的第2个span子标签</span><br><span class="line">   2. ul标签的第2个span后代标签</span><br><span class="line">   3. ul标签的父标签</span><br><span class="line">   4. id为cc的li标签的前面的所有li标签</span><br><span class="line">   5. id为cc的li标签的所有兄弟li标签</span><br><span class="line">   */</span><br><span class="line">  var $ul = $('ul')</span><br><span class="line">  //1. ul标签的第2个span子标签</span><br><span class="line">  //$ul.children('span:eq(1)').css('background', 'red')</span><br><span class="line"></span><br><span class="line">  //2. ul标签的第2个span后代标签</span><br><span class="line">  // $ul.find('span:eq(1)').css('background', 'red')</span><br><span class="line"></span><br><span class="line">  //3. ul标签的父标签</span><br><span class="line">  // $ul.parent().css('background', 'red')</span><br><span class="line"></span><br><span class="line">  //4. id为cc的li标签的前面的所有li标签</span><br><span class="line">  var $li = $('#cc')</span><br><span class="line">  // $li.prevAll('li').css('background', 'red')</span><br><span class="line"></span><br><span class="line">  //5. id为cc的li标签的所有兄弟li标签</span><br><span class="line">  $li.siblings('li').css('background', 'red')</span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="jQuery文档处理"><a href="#jQuery文档处理" class="headerlink" title="jQuery文档处理"></a>jQuery文档处理</h1><p>在原生JS中，对文档进行增删改，操作过程实在有些繁琐，我们先需要创建一个节点，给节点添加内容，将节点插入到指定的位置，使用的API些许复杂，jQuery中对于的文档的处理相比之下就更简单，也更灵活</p>
<ol>
<li>添加/替换元素<ul>
<li>append(content)<br>向当前匹配的所有元素内部的最后插入指定内容</li>
<li>prepend(content)<br>向当前匹配的所有元素内部的最前面插入指定内容</li>
<li>before(content)<br>将指定内容插入到当前所有匹配元素的前面</li>
<li>after(content)<br>将指定内容插入到当前所有匹配元素的后面</li>
<li>replaceWith(content)<br>用指定内容替换所有匹配的标签</li>
</ul>
</li>
<li>删除元素<ul>
<li>empty()<br>删除所有匹配元素的子元素</li>
<li>remove()<br>删除所有匹配的元素</li>
</ul>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">17</span>_文档_增删改&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;style type=<span class="string">"text/css"</span>&gt;</span><br><span class="line">  * &#123;</span><br><span class="line">    margin: <span class="number">0</span>px;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div1 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">200</span>px;</span><br><span class="line">    height: <span class="number">200</span>px;</span><br><span class="line">    top: <span class="number">20</span>px;</span><br><span class="line">    left: <span class="number">10</span>px;</span><br><span class="line">    background: blue;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div2 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">100</span>px;</span><br><span class="line">    height: <span class="number">100</span>px;</span><br><span class="line">    <span class="comment">/*top: 50px;*/</span></span><br><span class="line">    background: red;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .div3 &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: <span class="number">250</span>px;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;body&gt;</span></span><br><span class="line"><span class="regexp">&lt;ul id="ul1"&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;AAAAA&lt;/</span>li&gt;</span><br><span class="line"></span><br><span class="line">  &lt;li title=<span class="string">"hello"</span>&gt;BBBBB&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li class="box"&gt;CCCCC&lt;/</span>li&gt;</span><br><span class="line"></span><br><span class="line">  &lt;li title=<span class="string">"hello"</span>&gt;DDDDDD&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="two"&gt;EEEEE&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;FFFFF&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;ul id=<span class="string">"ul2"</span>&gt;</span><br><span class="line">  &lt;li&gt;aaa&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;bbb&lt;/</span>li&gt;</span><br><span class="line">  &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"box"</span>&gt;ccc&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li title="hello"&gt;ddd&lt;/</span>li&gt;</span><br><span class="line">  &lt;li title=<span class="string">"two"</span>&gt;eee&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求:</span></span><br><span class="line"><span class="string">   1. 向id为ul1的ul下添加一个span(最后)</span></span><br><span class="line"><span class="string">   2. 向id为ul1的ul下添加一个span(最前)</span></span><br><span class="line"><span class="string">   3. 在id为ul1的ul下的li(title为hello)的前面添加span</span></span><br><span class="line"><span class="string">   4. 在id为ul1的ul下的li(title为hello)的后面添加span</span></span><br><span class="line"><span class="string">   5. 将在id为ul2的ul下的li(title为hello)全部替换为p</span></span><br><span class="line"><span class="string">   6. 移除id为ul2的ul下的所有li</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //1. 向id为ul1的ul下添加一个span(最后)</span></span><br><span class="line"><span class="string">  var $ul1 = $('#ul1')</span></span><br><span class="line"><span class="string">  // $ul1.append('&lt;span&gt;append()添加的span&lt;/span&gt;')</span></span><br><span class="line"><span class="string">  $('&lt;span&gt;appendTo()添加的span&lt;/span&gt;').appendTo($ul1)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 向id为ul1的ul下添加一个span(最前)</span></span><br><span class="line"><span class="string">  // $ul1.prepend('&lt;span&gt;prepend()添加的span&lt;/span&gt;')</span></span><br><span class="line"><span class="string">  $('&lt;span&gt;prependTo()添加的span&lt;/span&gt;').prependTo($ul1)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 在id为ul1的ul下的li(title为hello)的前面添加span</span></span><br><span class="line"><span class="string">  $ul1.children('li[title=hello]').before('&lt;span&gt;before()添加的span&lt;/span&gt;')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. 在id为ul1的ul下的li(title为hello)的后面添加span</span></span><br><span class="line"><span class="string">  $ul1.children('li[title=hello]').after('&lt;span&gt;after()添加的span&lt;/span&gt;')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //5. 将在id为ul2的ul下的li(title为hello)全部替换为p</span></span><br><span class="line"><span class="string">  $('#ul2&gt;li[title=hello]').replaceWith('&lt;p&gt;replaceAll()替换的p&lt;/p&gt;')</span></span><br><span class="line"><span class="string">  //6. 移除id为ul2的ul下的所有li</span></span><br><span class="line"><span class="string">  // $('#ul2').empty()  // &lt;p&gt;也会删除</span></span><br><span class="line"><span class="string">  $('#ul2&gt;li').remove()</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h1><ol>
<li>事件绑定(2种)</li>
</ol>
<ul>
<li>eventName(function(){})<br>  绑定对应事件名的监听,    例如：$(‘#div’).click(function(){});</li>
<li>on(eventName, funcion(){})<br>  通用的绑定事件监听, 例如：$(‘#div’).on(‘click’, function(){})</li>
<li>优缺点:<br>  eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持<br>  on: 编码不方便, 可以添加多个监听, 且更通用</li>
</ul>
<ol start="2">
<li><p>事件解绑</p>
<ul>
<li>off(eventName)</li>
</ul>
</li>
<li><p>事件的坐标</p>
</li>
</ol>
<ul>
<li>event.clientX, event.clientY  相对于视口的左上角</li>
<li>event.pageX, event.pageY  相对于页面的左上角</li>
<li>event.offsetX, event.offsetY 相对于事件元素左上角</li>
</ul>
<ol start="4">
<li>事件相关处理</li>
</ol>
<ul>
<li>停止事件冒泡 : event.stopPropagation()</li>
<li>阻止事件默认行为 : event.preventDefault()</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">18</span>_事件绑定与解绑&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;style type=<span class="string">"text/css"</span>&gt;</span><br><span class="line">  * &#123;</span><br><span class="line">    margin: <span class="number">0</span>px;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .out &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">200</span>px;</span><br><span class="line">    height: <span class="number">200</span>px;</span><br><span class="line">    top: <span class="number">20</span>px;</span><br><span class="line">    left: <span class="number">10</span>px;</span><br><span class="line">    background: blue;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .inner &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    width: <span class="number">100</span>px;</span><br><span class="line">    height: <span class="number">100</span>px;</span><br><span class="line">    top: <span class="number">50</span>px;</span><br><span class="line">    background: red;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  .divBtn &#123;</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: <span class="number">250</span>px;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;body style="height: 2000px;"&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;div class="out"&gt;</span></span><br><span class="line"><span class="regexp">  外部DIV</span></span><br><span class="line"><span class="regexp">  &lt;div class="inner"&gt;内部div&lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;div class='divBtn'&gt;</span></span><br><span class="line"><span class="regexp">  &lt;button id="btn1"&gt;取消绑定所有事件&lt;/</span>button&gt;</span><br><span class="line">  &lt;button id=<span class="string">"btn2"</span>&gt;取消绑定mouseover事件&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">  &lt;button id="btn3"&gt;测试事件坐标&lt;/</span>button&gt;</span><br><span class="line">  &lt;a href=<span class="string">"http://www.baidu.com"</span> id=<span class="string">"test4"</span>&gt;百度一下&lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span> type=<span class="string">"text/javascript"</span> charset=<span class="string">"utf-8"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type="text/</span>javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求：</span></span><br><span class="line"><span class="string">   1. 给.out绑定点击监听(用两种方法绑定)</span></span><br><span class="line"><span class="string">   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)</span></span><br><span class="line"><span class="string">   3. 点击btn1解除.inner上的所有事件监听</span></span><br><span class="line"><span class="string">   4. 点击btn2解除.inner上的mouseover事件</span></span><br><span class="line"><span class="string">   5. 点击btn3得到事件坐标</span></span><br><span class="line"><span class="string">   6. 点击.inner区域, 外部点击监听不响应</span></span><br><span class="line"><span class="string">   7. 点击链接, 如果当前时间是偶数不跳转</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  //1. 给.out绑定点击监听(用两种方法绑定)</span></span><br><span class="line"><span class="string">  /*$('.out').click(function () &#123;</span></span><br><span class="line"><span class="string">   console.log('click out')</span></span><br><span class="line"><span class="string">   &#125;)*/</span></span><br><span class="line"><span class="string">  $('.out').on('click', function () &#123;</span></span><br><span class="line"><span class="string">    console.log('on click out')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   $('.inner')</span></span><br><span class="line"><span class="string">   .mouseenter(function () &#123; // 进入</span></span><br><span class="line"><span class="string">    console.log('进入')</span></span><br><span class="line"><span class="string">   &#125;)</span></span><br><span class="line"><span class="string">   .mouseleave(function () &#123; // 离开</span></span><br><span class="line"><span class="string">   console.log('离开')</span></span><br><span class="line"><span class="string">   &#125;)</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   $('.inner')</span></span><br><span class="line"><span class="string">   .on('mouseenter', function () &#123;</span></span><br><span class="line"><span class="string">   console.log('进入2')</span></span><br><span class="line"><span class="string">   &#125;)</span></span><br><span class="line"><span class="string">   .on('mouseleave', function () &#123;</span></span><br><span class="line"><span class="string">   console.log('离开2')</span></span><br><span class="line"><span class="string">   &#125;)</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  $('.inner').hover(function () &#123;</span></span><br><span class="line"><span class="string">    console.log('进入3')</span></span><br><span class="line"><span class="string">  &#125;, function () &#123;</span></span><br><span class="line"><span class="string">    console.log('离开3')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //3. 点击btn1解除.inner上的所有事件监听</span></span><br><span class="line"><span class="string">  $('#btn1').click(function () &#123;</span></span><br><span class="line"><span class="string">    $('.inner').off()</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //4. 点击btn2解除.inner上的mouseenter事件</span></span><br><span class="line"><span class="string">  $('#btn2').click(function () &#123;</span></span><br><span class="line"><span class="string">    $('.inner').off('mouseenter')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //5. 点击btn3得到事件坐标</span></span><br><span class="line"><span class="string">  $('#btn3').click(function (event) &#123; // event事件对象</span></span><br><span class="line"><span class="string">    console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角</span></span><br><span class="line"><span class="string">    console.log(event.clientX, event.clientY) // 原点为视口的左上角</span></span><br><span class="line"><span class="string">    console.log(event.pageX, event.pageY) // 原点为页面的左上角</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  //6. 点击.inner区域, 外部点击监听不响应</span></span><br><span class="line"><span class="string">  $('.inner').click(function (event) &#123;</span></span><br><span class="line"><span class="string">    console.log('click inner')</span></span><br><span class="line"><span class="string">    //停止事件冒泡</span></span><br><span class="line"><span class="string">    event.stopPropagation()</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">  //7. 点击链接, 如果当前时间是偶数不跳转</span></span><br><span class="line"><span class="string">  $('#test4').click(function (event) &#123;</span></span><br><span class="line"><span class="string">    if(Date.now()%2===0) &#123;</span></span><br><span class="line"><span class="string">      event.preventDefault()</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<p>5.事件委托(委派/代理)<br>在开始事件委托之前，我们来看一个例子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE HTML&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">20</span>_事件委托_引入.html&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;<span class="number">11111</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;1111111&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;<span class="number">111111111</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;11111111111&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;li&gt;22222&lt;/</span>li&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;button id=<span class="string">"btn"</span>&gt;添加新的li&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;br&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!--</span></span><br><span class="line"><span class="regexp">绑定事件监听的问题: 新加的元素没有监听</span></span><br><span class="line"><span class="regexp">--&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="js/</span>jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求：</span></span><br><span class="line"><span class="string">   1. 点击 li 背景就会变为红色</span></span><br><span class="line"><span class="string">   2. 点击 btn 就添加一个 li</span></span><br><span class="line"><span class="string">  */</span></span><br><span class="line"><span class="string">  $('ul&gt;li').click(function () &#123;</span></span><br><span class="line"><span class="string">    this.style.background = 'red'</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  $('#btn').click(function () &#123;</span></span><br><span class="line"><span class="string">    $('ul').append('&lt;li&gt;新增的li....&lt;/li&gt;')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<ol>
<li>事件委托(委派/代理):<ul>
<li>将多个子元素(li)的事件监听委托给父辈元素(ul)处理</li>
<li>监听回调是加在了父辈元素上</li>
<li>当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)</li>
<li>父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数</li>
</ul>
</li>
<li>事件委托的2方:<ul>
<li>委托方: 业主  li</li>
<li>被委托方: 中介  ul</li>
</ul>
</li>
<li>使用事件委托的好处<ul>
<li>添加新的子元素, 自动有事件响应处理</li>
<li>减少事件监听的数量: n==&gt;1</li>
</ul>
</li>
<li>jQuery的事件委托API<ul>
<li>设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)</li>
<li>移除事件委托: $(parentSelector).undelegate(eventName)</li>
</ul>
</li>
</ol>
<p>我们使用事件委托改进上面的例子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE HTML&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">20</span>_事件委托<span class="number">2</span>&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;<span class="number">1111</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;2222&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;<span class="number">3333</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;4444&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;li&gt;22222&lt;/</span>li&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;button id=<span class="string">"btn1"</span>&gt;添加新的li&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;button id="btn2"&gt;删除ul上的事件委托的监听器&lt;/</span>button&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"js/jquery-1.10.1.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">  /</span><span class="regexp">/ 设置事件委托</span></span><br><span class="line"><span class="regexp">  $('ul').delegate('li', 'click', function () &#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ console.log(this)</span></span><br><span class="line"><span class="regexp">    this.style.background = 'red'</span></span><br><span class="line"><span class="regexp">  &#125;)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">  $('#btn1').click(function () &#123;</span></span><br><span class="line"><span class="regexp">    $('ul').append('&lt;li&gt;新增的li....&lt;/</span>li&gt;<span class="string">')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">  $('#btn2').click(function () &#123;</span><br><span class="line">    <span class="comment">// 移除事件委托</span></span><br><span class="line">    $(<span class="string">'ul'</span>).undelegate(<span class="string">'click'</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h1><p>jQuery中提供了很多关于效果的API，但是已经很少使用了，CSS3的transform和animation属性可以完成几乎jQuery提供的全部动画的API，我就例一下吧，就不举例子了：</p>
<p>淡入淡出: 不断改变元素的透明度(opacity)来实现的</p>
<ol>
<li>fadeIn(): 带动画的显示</li>
<li>fadeOut(): 带动画隐藏</li>
<li>fadeToggle(): 带动画切换显示/隐藏</li>
</ol>
<p>滑动动画: 不断改变元素的高度实现</p>
<ol>
<li>slideDown(): 带动画的展开</li>
<li>slideUp(): 带动画的收缩</li>
<li>slideToggle(): 带动画的切换展开/收缩</li>
</ol>
<p>显示隐藏，默认没有动画, 动画(opacity/height/width)</p>
<ol>
<li><p>show(): (不)带动画的显示</p>
</li>
<li><p>hide(): (不)带动画的隐藏</p>
</li>
<li><p>toggle(): (不)带动画的切换显示/隐藏</p>
<p>jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的</p>
</li>
<li><p>animate(): 自定义动画效果的动画</p>
</li>
<li><p>stop(): 停止动画</p>
<h1 id="多库共存"><a href="#多库共存" class="headerlink" title="多库共存"></a>多库共存</h1><p>JS封装的函数库对$这个符号做了特殊的解释，使得它拥有了特别的功能，但是如果项目中有其他库也对$做了特殊的解释，这会产生多库共存的冲突，导致$失效，为了解决这个问题，jQuery想出了办法：<br>jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">26</span>_多库共存&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;style type="text/</span>css<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    * &#123;</span></span><br><span class="line"><span class="string">      margin: 0px;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    .div1 &#123;</span></span><br><span class="line"><span class="string">      position: absolute;</span></span><br><span class="line"><span class="string">      width: 100px;</span></span><br><span class="line"><span class="string">      height: 100px;</span></span><br><span class="line"><span class="string">      top: 50px;</span></span><br><span class="line"><span class="string">      left: 10px;</span></span><br><span class="line"><span class="string">      background: red;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &lt;/style&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;!--</span></span><br><span class="line"><span class="string">问题 : 如果有2个库都有$, 就存在冲突</span></span><br><span class="line"><span class="string">解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了</span></span><br><span class="line"><span class="string">API : jQuery.noConflict()</span></span><br><span class="line"><span class="string">--&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">" src="</span>js/myLib.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">" src="</span>js/jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  // 释放$的使用权</span></span><br><span class="line"><span class="string">  jQuery.noConflict()</span></span><br><span class="line"><span class="string">  // 调用myLib中的$</span></span><br><span class="line"><span class="string">  $()</span></span><br><span class="line"><span class="string">  // 要想使用jQuery的功能, 只能使用jQuery</span></span><br><span class="line"><span class="string">  jQuery(function () &#123;</span></span><br><span class="line"><span class="string">    console.log('文档加载完成')</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  console.log('+++++')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="onload和ready"><a href="#onload和ready" class="headerlink" title="onload和ready"></a>onload和ready</h1><p>$(function(){})其实是$(document).ready(function(){})的缩写，我前面说过这样写等于是加载文档完成时的监听，也就是window.onload，但实际上他们是有区别的：</p>
<ul>
<li>window.onload<ul>
<li>包括页面的图片加载完后才会回调(晚)</li>
<li>只能有一个监听回调<ul>
<li>$(document).ready()</li>
</ul>
</li>
<li>等同于: $(function(){})</li>
<li>页面加载完就回调(早)</li>
<li>可以有多个监听回调</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="built_in">window</span>.onload与$(<span class="built_in">document</span>).ready()&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;h1&gt;测试<span class="built_in">window</span>.onload与$(<span class="built_in">document</span>).ready()&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">&lt;img id="logo" src="https:/</span><span class="regexp">/gss0.bdstatic.com/</span><span class="number">5</span>bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/<span class="number">2017</span><span class="number">-05</span><span class="number">-19</span>/<span class="number">6</span>fec71d56242b74eb24b4ac80b817eac.png<span class="string">"&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">" src="</span>js/jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求：</span></span><br><span class="line"><span class="string">   1. 直接打印img的宽度，观察其值</span></span><br><span class="line"><span class="string">   2. 在 $(function()&#123;&#125;) 中 打印 img 的宽度</span></span><br><span class="line"><span class="string">   3. 在 window.onload 中打印宽度</span></span><br><span class="line"><span class="string">   4. 在 img 加载完成后打印宽度</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  // 1. 直接打印img的宽度，观察其值</span></span><br><span class="line"><span class="string">  console.log('直接', $('#logo').width())</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">  window.onload = function () &#123;</span></span><br><span class="line"><span class="string">    console.log('onload', $('#logo').width())</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">  window.onload = function () &#123;</span></span><br><span class="line"><span class="string">    console.log('onload2', $('#logo').width())</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">  $(function () &#123;</span></span><br><span class="line"><span class="string">    console.log('ready', $('#logo').width())</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  $(function () &#123;</span></span><br><span class="line"><span class="string">    console.log('ready2', $('#logo').width())</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">  $('#logo').on('load', function () &#123;</span></span><br><span class="line"><span class="string">    console.log('img load', $(this).width())</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  /*$(document).ready(function () &#123;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  &#125;)*/</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="jQuery插件"><a href="#jQuery插件" class="headerlink" title="jQuery插件"></a>jQuery插件</h1><p>插件其实就是基于jQuery编写的扩展库，jQuery插件依赖于jQuery，jQuery插件众多，使用方法各异，我就不一一例举了，合理的使用jQuery插件可以帮助你的开发，详情可以访问jQuery官方的插件库:<a href="https://plugins.jquery.com/" target="_blank" rel="noopener">链接</a><br>这里我们讲一下关于扩展插件的方法</p>
<ol>
<li>扩展jQuery核心函数的工具方法<br>$.extend(object)</li>
<li>扩展jQuery核心对象的方法<br>$.fn.extend(object)</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">  &lt;title&gt;<span class="number">25</span>_扩展插件&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">  &lt;style type="text/</span>css<span class="string">"&gt;</span></span><br><span class="line"><span class="string">    * &#123;</span></span><br><span class="line"><span class="string">      margin: 0px;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    .div1 &#123;</span></span><br><span class="line"><span class="string">      position: absolute;</span></span><br><span class="line"><span class="string">      width: 100px;</span></span><br><span class="line"><span class="string">      height: 100px;</span></span><br><span class="line"><span class="string">      top: 50px;</span></span><br><span class="line"><span class="string">      left: 10px;</span></span><br><span class="line"><span class="string">      background: red;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &lt;/style&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;input type="</span>checkbox<span class="string">" name="</span>items<span class="string">" value="</span>足球<span class="string">"/&gt;足球</span></span><br><span class="line"><span class="string">&lt;input type="</span>checkbox<span class="string">" name="</span>items<span class="string">" value="</span>篮球<span class="string">"/&gt;篮球</span></span><br><span class="line"><span class="string">&lt;input type="</span>checkbox<span class="string">" name="</span>items<span class="string">" value="</span>羽毛球<span class="string">"/&gt;羽毛球</span></span><br><span class="line"><span class="string">&lt;input type="</span>checkbox<span class="string">" name="</span>items<span class="string">" value="</span>乒乓球<span class="string">"/&gt;乒乓球</span></span><br><span class="line"><span class="string">&lt;br/&gt;</span></span><br><span class="line"><span class="string">&lt;input type="</span>button<span class="string">" id="</span>checkedAllBtn<span class="string">" value="</span>全　选<span class="string">"/&gt;</span></span><br><span class="line"><span class="string">&lt;input type="</span>button<span class="string">" id="</span>checkedNoBtn<span class="string">" value="</span>全不选<span class="string">"/&gt;</span></span><br><span class="line"><span class="string">&lt;input type="</span>button<span class="string">" id="</span>reverseCheckedBtn<span class="string">" value="</span>反选<span class="string">"/&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;!--</span></span><br><span class="line"><span class="string">1. 扩展jQuery的工具方法</span></span><br><span class="line"><span class="string">  $.extend(object)</span></span><br><span class="line"><span class="string">2. 扩展jQuery对象的方法</span></span><br><span class="line"><span class="string">  $.fn.extend(object)</span></span><br><span class="line"><span class="string">--&gt;</span></span><br><span class="line"><span class="string">&lt;script src="</span>js/jquery<span class="number">-1.10</span><span class="number">.1</span>.js<span class="string">" type="</span>text/javascript<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">" src="</span>js/my_jQuery-plugin.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt;</span></span><br><span class="line"><span class="string">  /*</span></span><br><span class="line"><span class="string">   需求：</span></span><br><span class="line"><span class="string">   1. 给 $ 添加4个工具方法:</span></span><br><span class="line"><span class="string">     * min(a, b) : 返回较小的值</span></span><br><span class="line"><span class="string">     * max(c, d) : 返回较大的值</span></span><br><span class="line"><span class="string">     * leftTrim() : 去掉字符串左边的空格</span></span><br><span class="line"><span class="string">     * rightTrim() : 去掉字符串右边的空格</span></span><br><span class="line"><span class="string">   2. 给jQuery对象 添加3个功能方法:</span></span><br><span class="line"><span class="string">     * checkAll() : 全选</span></span><br><span class="line"><span class="string">     * unCheckAll() : 全不选</span></span><br><span class="line"><span class="string">     * reverseCheck() : 全反选</span></span><br><span class="line"><span class="string">   */</span></span><br><span class="line"><span class="string">  console.log($.min(3, 5), $.max(3, 5))</span></span><br><span class="line"><span class="string">  var string = '   my atguigu    '</span></span><br><span class="line"><span class="string">  console.log('-----' + $.leftTrim(string) + '-----')</span></span><br><span class="line"><span class="string">  console.log('-----' + $.rightTrim(string) + '-----')</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  var $items = $(':checkbox[name=items]')</span></span><br><span class="line"><span class="string">  $('#checkedAllBtn').click(function () &#123;</span></span><br><span class="line"><span class="string">    $items.checkAll()</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  $('#checkedNoBtn').click(function () &#123;</span></span><br><span class="line"><span class="string">    $items.unCheckAll()</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">  $('#reverseCheckedBtn').click(function () &#123;</span></span><br><span class="line"><span class="string">    $items.reverseCheck()</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>
<p>my_jQuery-plugin.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 需求：</span></span><br><span class="line"><span class="comment"> 1. 给 $ 添加4个工具方法:</span></span><br><span class="line"><span class="comment">   * min(a, b) : 返回较小的值</span></span><br><span class="line"><span class="comment">   * max(c, d) : 返回较大的值</span></span><br><span class="line"><span class="comment">   * leftTrim() : 去掉字符串左边的空格</span></span><br><span class="line"><span class="comment">   * rightTrim() : 去掉字符串右边的空格</span></span><br><span class="line"><span class="comment"> 2. 给jQuery对象 添加3个功能方法:</span></span><br><span class="line"><span class="comment"> * checkAll() : 全选</span></span><br><span class="line"><span class="comment"> * unCheckAll() : 全不选</span></span><br><span class="line"><span class="comment"> * reverseCheck() : 全反选</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 扩展$的方法</span></span><br><span class="line">  $.extend(&#123;</span><br><span class="line">    min: <span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> a &lt; b ? a : b</span><br><span class="line">    &#125;,</span><br><span class="line">    max: <span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> a &gt; b ? a : b</span><br><span class="line">    &#125;,</span><br><span class="line">    leftTrim: <span class="function"><span class="keyword">function</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/^\s+/</span>, <span class="string">''</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    rightTrim: <span class="function"><span class="keyword">function</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/\s+$/</span>, <span class="string">''</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 扩展jQuery对象的方法</span></span><br><span class="line">  $.fn.extend(&#123;</span><br><span class="line">    checkAll: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.prop(<span class="string">'checked'</span>, <span class="literal">true</span>) <span class="comment">// this是jQuery对象</span></span><br><span class="line">    &#125;,</span><br><span class="line">    unCheckAll: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.prop(<span class="string">'checked'</span>, <span class="literal">false</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    reverseCheck: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// this是jQuery对象</span></span><br><span class="line">      <span class="keyword">this</span>.each(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">// this是dom元素</span></span><br><span class="line">        <span class="keyword">this</span>.checked = !<span class="keyword">this</span>.checked</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
<p>好了，我的分享就到这里了，谢谢大家!</p>

      
      <!-- reward -->
      
      <div id="reward-btn">
        打赏
      </div>
      
    </div>
    
    
      <!-- copyright -->
      
        <div class="declare">
          <ul class="post-copyright">
            <li>
              <i class="ri-copyright-line"></i>
              <strong>版权声明： </strong s>
              本博客所有文章除特别声明外，均采用 <a href="https://www.apache.org/licenses/LICENSE-2.0.html" rel="external nofollow"
                target="_blank">Apache License 2.0</a> 许可协议。转载请注明出处！
            </li>
          </ul>
        </div>
        
    <footer class="article-footer">
      
          
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://lockme.gitee.io/2020/09/07/%E7%96%AF%E7%8B%82%E7%9A%84jQuery-md/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E6%8A%80%E6%9C%AF/" rel="tag">技术</a></li></ul>


    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/2020/09/07/Node-js%E7%AE%80%E5%8D%95%E5%85%A5%E9%97%A8%E4%BB%8B%E7%BB%8D-md/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            Node.js简单入门介绍.md
          
        </div>
      </a>
    
    
      <a href="/2020/06/13/Advanced-JS-four-md/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">Advanced_JS_four.md</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        app_id: 'pmaQYnbUE9O0H1hiYKLiec4R-gzGzoHsz',
        app_key: 'LMujtI79W4vgEQ3Az5IMo50y',
        path: window.location.pathname,
        notify: 'false',
        verify: 'false',
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020
        月下ctrlc
      </li>
      <li>
        
        Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <span>
  <i>PV:<span id="busuanzi_value_page_pv"></span></i>
  <i>UV:<span id="busuanzi_value_site_uv"></span></i>
</span>
        
      </li>
      
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
      <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    <aside class="sidebar">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/avatar.jpg" alt="Small Bridge"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/Vue/">Vue</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="http://shenyu-vip.lofter.com" target="_blank" rel="noopener">主题作者相册</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2020/03/18/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>拿钱砸死我吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/share.js"></script>


<script src="/js/lazyload.min.js"></script>


<script>
  try {
    var typed = new Typed("#subtitle", {
      strings: ['面朝大海，春暖花开', '愿你一生努力，一生被爱', '想要的都拥有，得不到的都释怀'],
      startDelay: 0,
      typeSpeed: 200,
      loop: true,
      backSpeed: 100,
      showCursor: true
    });
  } catch (err) {
  }

</script>




<script src="/js/tocbot.min.js"></script>

<script>
  // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto',
    onClick: (e) => {
      $('.toc-link').removeClass('is-active-link');
      $(`a[href=${e.target.hash}]`).addClass('is-active-link');
      $(e.target.hash).scrollIntoView();
      return false;
    }
  });
</script>



<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/js/ayer.js"></script>



<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
  });

  MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for(i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
  var ayerConfig = {
    mathjax: true
  }
</script>



<script src="/js/busuanzi-2.3.pure.min.js"></script>



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>


    
  </div>
</body>

</html>